<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 头部 -->
        <!-- 组件复用 -->
        <TreeTools
          :tree-data="title"
          :is-root="true"
          @openDialog="openDialog"
        />

        <!-- 树组件 -->
        <!--
          data属性是树组件的数据
          props是展示规则的属性，是一个对象，
          label是默认显示文字的属性
          children是用来指定子级的数据
         -->
        <el-tree
          :data="data"
          :props="{ label: 'name', children: 'children' }"
          @updateList="initData"
        >
          <!-- 复用头部组件 -->
          <TreeTools
            slot-scope="{ data }"
            :tree-data="data"
            @openDialog="openDialog"
            @editDialog="editDialog"
          />
        </el-tree>
      </el-card>
    </div>

    <!-- 新增/修改组件 -->
    <AddDepart ref="addDepart" @updateList="initData" />
  </div>
</template>

<script>
import TreeTools from './components/treeTools.vue'
import AddDepart from './components/addDepart.vue'
import { getDepartmentListApi } from '@/api/department'
import { tranListToTreeData } from '@/utils'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDepart
  },
  data() {
    return {
      title: { name: '传智教育', manager: '负责人', id: '' },
      // 1.定义数据
      data: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 2.获取数据
    async initData() {
      const { companyName, depts } = await getDepartmentListApi()
      this.data = tranListToTreeData(depts, '')
      this.title.name = companyName
    },

    // 新增的弹框
    openDialog(id) {
      // console.log('我们要给id为' + id + '的部门新增子部门')
      // console.log(this.$refs.addDepart)
      // this.dialogShow = true
      this.$refs.addDepart.dialogShow = true
      this.$refs.addDepart.formData.pid = id
      // console.log(this.$refs.addDepart.formData.pid)
    },

    // 修改的弹框
    editDialog(id) {
      console.log(id)
      // 获取组件的信息
      console.log(this.$refs.addDepart) // 里面有该组件的所有的方法，这里我们需要获取表单信息的方法
      // 调用方法，传入id，获取表单信息
      this.$refs.addDepart.getFormDateInfo(id)
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
